
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Users, RefreshCw, Bookmark } from "lucide-react";

interface RecommendedGroup {
  name: string;
  members: number;
  tags: string[];
  reason: string;
  matchType: 'learning-style' | 'strengths' | 'interests';
}

export const RecommendedGroupsForStudent = () => {
  // Mock data - in real app this would come from assessment results
  const recommendedGroups: RecommendedGroup[] = [
    {
      name: "Visual Study Masters",
      members: 89,
      tags: ["#visual-learning", "#diagrams", "#mind-maps"],
      reason: "Matches your Visual learning style",
      matchType: "learning-style"
    },
    {
      name: "Creative Project Lab",
      members: 124,
      tags: ["#creative-projects", "#innovation", "#collaboration"],
      reason: "Perfect for Creative Contributors",
      matchType: "strengths"
    },
    {
      name: "Social Learning Circle",
      members: 156,
      tags: ["#discussion", "#peer-support", "#social-learning"],
      reason: "Aligns with your Social-Investigative interests",
      matchType: "interests"
    },
    {
      name: "Analytical Thinkers Hub",
      members: 78,
      tags: ["#problem-solving", "#critical-thinking", "#analysis"],
      reason: "Great for developing your analytical strengths",
      matchType: "strengths"
    }
  ];

  const getMatchColor = (matchType: string) => {
    switch (matchType) {
      case 'learning-style': return 'text-blue-600 bg-blue-50 border-blue-200';
      case 'strengths': return 'text-purple-600 bg-purple-50 border-purple-200';
      case 'interests': return 'text-green-600 bg-green-50 border-green-200';
      default: return 'text-gray-600 bg-gray-50 border-gray-200';
    }
  };

  return (
    <Card className="bg-gradient-to-r from-blue-50 to-purple-50 border-blue-100">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl font-semibold text-blue-900">
              Recommended for You
            </CardTitle>
            <p className="text-blue-700 text-sm mt-1">
              Based on your learning profile and interests
            </p>
          </div>
          <Button variant="outline" size="sm" className="text-blue-600 border-blue-200 hover:bg-blue-100">
            <RefreshCw className="w-4 h-4 mr-1" />
            Refresh
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {recommendedGroups.map((group, index) => (
            <Card key={index} className="bg-white border-white shadow-sm hover:shadow-md transition-all duration-200 group cursor-pointer">
              <CardContent className="p-4">
                <div className="flex items-start justify-between mb-2">
                  <h4 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                    {group.name}
                  </h4>
                  <Button variant="ghost" size="sm" className="p-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <Bookmark className="w-4 h-4" />
                  </Button>
                </div>
                
                <p className="text-sm text-gray-600 mb-2">{group.members} members</p>
                
                <div className="flex flex-wrap gap-1 mb-3">
                  {group.tags.map((tag, tagIndex) => (
                    <Badge key={tagIndex} variant="secondary" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                </div>
                
                <div className={`text-xs px-2 py-1 rounded-full mb-3 ${getMatchColor(group.matchType)}`}>
                  {group.reason}
                </div>
                
                <Button size="sm" className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white">
                  <Users className="w-4 h-4 mr-2" />
                  Join Group
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
